<section data-extend-template="layouts/partials/table.html">
  <div data-block="list-actions">
    <button ng-if="isState('content-host.host-collections.list')"
            type="button"
            class="btn btn-default"
            ng-hide="denied('edit_hosts', host)"
            ng-disabled="table.numSelected == 0 || table.working"
            ng-click="removeHostCollections(host)">
      <span translate>Remove Selected</span>
    </button>
    <button ng-if="isState('content-host.host-collections.add')"
            type="button"
            class="btn btn-default"
            ng-hide="denied('edit_hosts', host)"
            ng-disabled="table.numSelected == 0 || table.working"
            ng-click="addHostCollections(host)">
      <span translate>Add Selected</span>
    </button>
  </div>

  <span data-block="no-rows-message">
    <span ng-if="isState('content-host.host-collections.list')" translate>
      No Host Collections to show, you can add Host Collections after selecting the 'Add' tab.
    </span>

    <span ng-if="isState('content-host.host-collections.add')" translate>
      No Host Collections to show, you can add Host Collections after selecting 'Host Collections' under 'Hosts' in main menu.
    </span>
  </span>

  <span data-block="no-search-results-message" translate>
    No Host Collections match your search.
  </span>

  <div data-block="table">
    <table bst-table="table" ng-class="{'table-mask': table.working}"
           class="table table-striped table-bordered">
      <thead>
        <tr bst-table-head row-select="hostCollection">
          <th bst-table-column="name" translate>Name</th>
          <th bst-table-column="description" translate>Description</th>
          <th bst-table-column="capacity" translate>Capacity</th>
        </tr>
      </thead>

      <tbody>
        <tr bst-table-row ng-repeat="hostCollection in table.rows" row-select="hostCollection">
          <td bst-table-cell>
            <a ui-sref="host-collection.info({hostCollectionId: hostCollection.id})">
              {{ hostCollection.name }}
            </a>
          </td>
          <td bst-table-cell>{{ hostCollection.description }}</td>
          <td bst-table-cell>{{ hostCollection.total_hosts }} / {{ hostCollection.max_hosts | unlimitedFilter:hostCollection.unlimited_hosts }}</td>
        </tr>
      </tbody>
    </table>
  </div>
</section>
